<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello 触动精灵 ShowUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/tsShowUI.css">

    <!-- 官方源码 -->
    <!-- https://helpdoc.touchsprite.com/dev_docs/12/62.html -->

</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <button id="ts-cancle" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span><span class=" mui-tscancel">返回</span></button>
        <button id="ts-timer" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right"></button>
        <h1 class="mui-title mui-tstitle"></h1>
    </header>
    <footer class="mui-bar mui-bar-footer mui-bar-tsfooter">
        <button id="ts-post-btn" class="mui-ts-footerbth btn mui-btn-block mui-btn-blue mui-tsaction" data-loading-text="执行中" type="button">开始</button>
    </footer>
    <div class="mui-content">
        <form class="mui-tsform">
            <div class="mui-card" id="renderbox">
            </div>
        </form>
    </div>

    <!-- 这是给 lua用的 -->
    <script src="js/tsShowUI.js"></script>
    <!-- 这个是给本地测试ui用的 -->
    <script src="../../js/tsShowUI.js"></script>

    <script>
    (function($, doc) {
        var uiVersion=$.getVersion();//获取ui版本
        //json兼容原showui 格式
        var showui_json = {//通过$.renderUI方法来添加组件（页面只需添加一次）
            "title": "触动精灵脚本配置",
            "cancelname": "取消",
            "config": "8888.txt",
            "okname": "开始",
            "titles" : "项目名称1,项目名称2,项目名称3,项目名称4,项目名称5,项目名称6",
            "pagenumtype" : "tab",
            "style": "default",
            "align":'center',
            "titlesize":15,
            "timer": 30,
            "orient": 0,
            "pagetype": "multi",
            "pages": [
            [
                {   "type":"Label",
                    "size":20,
                    "align":"center",
                    "color":"100,255,100",
                    "width":20,
                    "text":"分割线"
                },
                {
                    "type":"Line",
                    "align":"center",
                    "color":"0,0,0",
                    "width":600,
                    "height":"5"
                },
                {   "type":"Label",
                    "size":20,
                    "align":"center",
                    "color":"100,255,100",
                    "text":"滑块"
                },
                {   "type":"Slide",
                     "id":"huakuai",
                    "default":"20",
                    "min":"5",
                    "max":"50",
                    "span":"2"
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"center",
                    "color":"100,255,100",
                    "text":"单选组合"
                },
                {
                    "type":"RadioGroup",
                    "id":"danxuan",
                    "select":"2",
                    "list":"单选1,单选2,单选3,单选4"
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"center",
                    "color":"100,255,100",
                    "text":"多选组合"
                },
                {
                    "type":"CheckBoxGroup",
                    "id":"duoxuan",
                    "select":"1@3@5",
                    "list":"电影,读书,跑步,吃饭,运动,睡觉,旅行,打豆豆,听歌"
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"left",
                    "color":"100,255,100",
                    "text":"数字单行文本框"
                },
                {
                    "type": "Edit",
                    "id": "shuzi",
                    "prompt": "请输入一个数字",
                    "text": "1234",
                    "kbtype": "number",
                    "secure": true
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"left",
                    "color":"100,255,100",
                    "text":"普通单行文本框"
                },
                {
                    "type": "Edit",
                    "id": "putong",
                    "prompt": "请输入一个字母",
                    "text": "默认值",
                    "row": "5",
                    "kbtype": "ascii"
               },
               {
                    "type":"Label",
                    "size":20,
                    "align":"left",
                    "color":"100,255,100",
                    "text":"密码单行文本框"
                },
                {   "type": "Edit",
                    "id": "mima",
                    "prompt": "请输入密码",
                    "text": "hhkjkjh",
                    "kbtype": "password"
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"left",
                    "color":"100,255,100",
                    "text":"多行文本框"
                },
                {
                    "type":"TextArea",
                    "id":"duohang",
                    "size":15,
                    "height":250,
                    "color":"255,0,0",
                    "prompt":"我是hint",
                    "align":"center",
                    "kbtype":"number",
                    "text":"1\r\n2\n3"
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"left",
                    "color":"100,255,100",
                    "text":"下拉框"
                },
                {
                    "type":"ComboBox",
                    "id":"xiala1",
                    "select":"0",
                    "list":"北京,上海"
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"left",
                    "color":"100,255,100",
                    "text":"联动下拉框"
                },
                {
                    "type":"ComboBox",
                    "id":"xiala2",
                    "select":"1#1",
                    "list":"北京,上海",
                    "data":"北京1,北京2#上海1,上海2"
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"left",
                    "color":"100,255,100",
                    "text":"开关"
                },
                {
                    "type":"Switch",
                    "id":"kaiguan1",
                    "size":"s",
                    "align":"center",
                    "state":"on"
                },
                {
                    "type":"Switch",
                    "id":"kaiguan2",
                    "size":"s",
                    "align":"right",
                    "state":"off"
                },
                ],[
                {
                    "type":"Label",
                    "size":20,
                    "align":"center",
                    "color":"100,255,100",
                    "text":"图片"
                },
                {
                    "type":"Image",
                    "src":"http:\/\/www.baidu.com\/img\/bdlogo.png",
                    "scale":1
                },
                {
                    "type":"Label",
                    "size":20,
                    "align":"center",
                    "color":"100,255,100",
                    "text":"网页"
                },
                {
                    "type":"Web",
                    "height":500,
                    "url":"https://www.touchsprite.com"
                },
                ],[
                {
                    "type":"Label",
                    "size":20,
                    "align":"center",
                    "color":"100,255,100",
                    "text":"开关"
                },
                {
                    "type":"switches",
                    "id":"kaiguan3",
                    "list":"开关1,开关2,开关3,开关4",
                    "select": "0@2"
                }
            ]
            ]
        };
        $.renderUI(showui_json);
    })(mui, document)
    </script>
</body>
</html>
